<!DOCTYPE html>
<html>
    <head>
        <style>
            td {
                width: 50px;
                height: 50px;
                padding: 0px;
            }

            .container {
                display: flex;
            }

            .container * {
                flex-shrink: 0;
            }

            .margins {
                background-color: rgb(0, 255, 255);
            }

            .vfiller {
                height: 3000px;
            }

            .hfiller {
                width: 2000px;
            }

            tr:first-child > td:first-child {
                background-color: rgb(255,0,0);
            }

            tr:first-child td:last-child {
                background-color: rgb(0,255,0);
            }

            tr:last-child td:first-child {
                background-color: rgb(0,0,255);
            }

            tr:last-child td:last-child {
                background-color: rgb(255,255,0);
            }

            table {
                border-collapse: collapse;
                border-spacing:  0;
                margin: 25px;
            }
        </style>
    </head>
    <body>
        <button id="hide">Hide target</button>
        <button id="remove">Remove target</button>
        <div class="vfiller"></div>
        <div class="container">
            <div class="hfiller"></div>
            <div class="margins">
                <table>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="hfiller"></div>
        </div>
        <div class="vfiller"></div>
        <script>
            const table = document.querySelector('table');

            document.querySelector('#hide').addEventListener('click', function () {
                table.style.visibility = 'hidden';
            });

            document.querySelector('#remove').addEventListener('click', function () {
                table.parentNode.removeChild(table);
            });

            const testCafeCore     = window['%testCafeCore%'];
            const ScrollAutomation = testCafeCore.ScrollAutomation;
            const origRunScroll    = ScrollAutomation.prototype.run;

            window.wasScrolled               = false;
            window.internalScrollEventsCount = 0;

            window.addEventListener('scroll', function () {
                window.wasScrolled = true;
            }, true);


            ScrollAutomation.prototype.run = function () {
                window.internalScrollEventsCount++;

                return origRunScroll.apply(this, arguments);
            };
        </script>
    </body>
</html>
